<template>
  <div>
    <div class="app-container">
      <mt-field
        v-model="mobile"
        label="手机号"
        placeholder="请输入手机号"
        type="tel"
      />

      <SmsCode
        v-model="verifyCode"
        :mobile="mobile"
        label=""
        placeholder="输入验证码"
        @click="onClickSmsCode"
      />

      <mt-field
        v-model="form.username"
        label="用户名"
        placeholder="请输入用户名"
      />

      <Password v-model="form.password" label="密码" placeholder="请输入密码" />

      <Password
        v-model="form.password2"
        label="确认密码"
        placeholder="再次输入密码"
      />

      <mt-button type="primary" @click.native="handleRegister">
        注册
      </mt-button>
      {{ verifyCode2 }}
    </div>
  </div>
</template>

<script>
import SmsCode from '@/components3/Field/SmsCode'
import SmsMixin from '@/mixins/sms'
import Password from '@/components3/Field/Password'

export default {
  name: 'ResetPsw',
  components: { SmsCode, Password },
  directives: {},
  filters: {},
  mixins: [SmsMixin],
  props: {},

  data() {
    return {
      form: {
        password: '',
        password2: ''
      }
    }
  },
  computed: {},
  async created() {
    //
  },

  methods: {
    onClickSmsCode() {
      console.log('xxx,onClickSmsCode')
      this.sendSms({ tosend: 1 })
    },

    handleRegister() {
      console.log('xxx, click handleRegister,')
      if (!this.mobile) {
        this.$message({
          message: '请输入手机号',
          type: 'error'
        })
      } else if (!this.verifyCode) {
        this.$message({
          message: '请输入短信验证码',
          type: 'error'
        })
      } else if (!this.form.username) {
        this.$message({
          message: '请输入用户名',
          type: 'error'
        })
      } else if (!this.form.password) {
        this.$message({
          message: '请输入密码',
          type: 'error'
        })
      } else if (this.form.password.length < 6) {
        this.$message({
          message: '密码至少6位',
          type: 'error'
        })
      } else if (this.form.password !== this.form.password2) {
        this.$message({
          message: '两次输入的密码不一致',
          type: 'error'
        })
      } else {
        const ret = this.$store.dispatch('user/register', {
          mobile: this.mobile,
          code: this.verifyCode,
          username: this.form.username,
          password: this.form.password
        })
        // console.log('xxx,checkPsw ', res)
        ret.then(res => {
          console.log('xxx,register ', res)
          if (res) {
            this.$store.dispatch('appView/selectLogin', 'login')
            this.$store.dispatch('appView/selectHome', 'home')
            this.$router.push('/app/login')
          }
        })
      }
    }
  }
}
</script>

<style type="text/css"></style>
